<template>
    <div>
        <div class="flex_evenly mt100 mb100 pl100 pr100">
            <a-button type="default" 
                      shape="round"
                      size="large">
                <div class="w150 bold">精选文章</div>
            </a-button>
            <a-button type="default" 
                      shape="round"
                      size="large">
                <div class="w150 bold">我的喜欢</div>
            </a-button>
            <a-button type="default" 
                      shape="round"
                      size="large">
                <div class="w150 bold">我的收藏</div>
            </a-button>
        </div>
        <div class="aca_main_group flex_column mt50">
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="陈氏太极拳12aaa">
                    <template #description>
                        <div class="bg_orange">太极 健康 运动 养生</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="中医彭鑫博士养生操">
                    <template #description>
                        <div class="bg_orange">养生操 运动 健康</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="吃鸡蛋=高胆固醇?">
                    <template #description>
                        <div class="bg_orange">鸡蛋 高胆固醇 膳食 均衡 健康</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
        </div>
        <div class="aca_main_group flex_column mt50 mb100">
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="陈氏太极拳12aaa">
                    <template #description>
                        <div class="bg_orange">太极 健康 运动 养生</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="中医彭鑫博士养生操">
                    <template #description>
                        <div class="bg_orange">养生操 运动 健康</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
            <a-card hoverable style="width: 300px">
                <template #cover>
                    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                </template>
                <a-card-meta title="吃鸡蛋=高胆固醇?">
                    <template #description>
                        <div class="bg_orange">鸡蛋 高胆固醇 膳食 均衡 健康</div>
                    </template>
                </a-card-meta>
                <div class="mt20 mb15 light_gray">
                    <hr/>
                </div>
                <a-button type="primary" shape="round">立即观看</a-button>
            </a-card>
        </div>
        <div class="mb50">
            <a-pagination :total="50" show-size-changer />
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.aca_main_group {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
</style>